<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">

    <style>

        .menu{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }

        .menu .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #0f0f0f;
        }

        .menu .content a{
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #0f0f0f;
        }

        .hide{
            display: none;
        }





    </style>

</head>


<body>

<div class="menu">
    <div class="item">
        <div class="header" onclick="clickMe(this)">上海</div>
        <div class="content hide" >
             <a>宝山区</a>
            <a>乐乐区</a>
            <a>嘻嘻区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this)">北京</div>
        <div class="content hide" >
             <a>胡同</a>
            <a>八嘎</a>
            <a>嘿嘿</a>
        </div>
    </div>
</div>







<script src="../static/js/jquery-3.7.1.js"></script>
<script src="../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

<script type="text/javascript">

    let prev_item = null;

    function clickMe(self){
        if( prev_item === null ){
            $(self).next().removeClass("hide");
            prev_item = $(self).next();
        } else if( prev_item === $(self).next() ) {
            if( prev_item.hasClass("hide") ){
                prev_item.removeClass("hide");
            } else {
                prev_item.addClass("hide");
            }
        } else {
             $(self).next().removeClass("hide");
             prev_item.addClass("hide");
             prev_item = $(self).next()
        }




    }


</script>
</body>
</html>